<template>
  <div class="shop_evaluate">
      <div class="popre_list" :style="popre_id==0?'padding-top:28rpx;border-top:none':''" v-for="(item_popre,popre_id) in popre_list" :key="popre_id">
          <div class="popre_header">
              <div class="popre_l">
                  <image :src="item_popre.header_img"/>
                  <div class="popre_info">
                      <div class="popre_name">{{item_popre.name}}</div>
                      <div class="popre_time">{{item_popre.time}}</div>
                  </div>
              </div>
              <div class="popre_r">
                  <div class="stars">
                    <image :src="item_popre.start-4==0.5?starImg:(item_popre.start>=5?afterImg:beforeImg)"/>
                    <image :src="item_popre.start-3==0.5?starImg:(item_popre.start>=4?afterImg:beforeImg)"/>
                    <image :src="item_popre.start-2==0.5?starImg:(item_popre.start>=3?afterImg:beforeImg)"/>
                    <image :src="item_popre.start-1==0.5?starImg:(item_popre.start>=2?afterImg:beforeImg)"/>
                    <image :src="item_popre.start-0==0.5?starImg:(item_popre.start>=1?afterImg:beforeImg)"/>
                  </div>  
              </div>
          </div>
          <div class="popre_title">{{item_popre.title}}</div>
          <!-- 全部评价，图片显示 -->
          <div class="evaluate_img_box" v-if="only?false:true">
              <div class="evaluate_box" v-for="(evaluate,img_id) in item_popre.evaluate_img" :key="img_id">
                  <image :src="evaluate.img"/>
              </div>
          </div>
          <!-- 单个评价，图片显示 -->
          <div class="only_img" v-if="only?true:false">
              <div class="only_box" v-for="(evaluate,img_id) in item_popre.evaluate_img" :key="img_id">
                  <image :src="evaluate.img"/>
              </div>
          </div>
          <div class="cations">
              <div class="cations_info" v-for=" (item,i) in item_popre.cations " :key="i">
                <div v-for="(items,idx) in item" :key='idx'>
                  <span>{{idx}}:{{items}}</span>  
                </div>    
              </div>
          </div>  
      </div>
  
  </div>
</template>

<script>


export default {
  data () {
    return {
        popre_list:[
          {header_img:'/static/images/header_img.png',name:'姓名',time:'2019/05/03 15:36:20',start:1,
            title:'非常好看，质量也很好物有所值，这个价格算是比较实惠的了，发货很快，客服的态度很好，百问不烦，好耐心。',
            evaluate_img:[
              {img:'/static/images/img.png'},{img:'/static/images/img.png'},{img:'/static/images/img.png'}
            ],
            cations:[
              {颜色:'藏青色'},{尺码:120},{数量:1}
            ]
          },
          // {header_img:'/static/images/header_img.png',name:'姓名',time:'2019/05/03 15:36:20',start:1.5,
          //   title:'非常好看，质量也很好物有所值，这个价格算是比较实惠的了，发货很快，客服的态度很好，百问不烦，好耐心。',
          //   evaluate_img:[
          //     {img:'/static/images/img.png'},{img:'/static/images/img.png'},{img:'/static/images/img.png'}
          //   ],
          //   cations:[
          //     {颜色:'藏青色'},{尺码:120},{数量:1}
          //   ]
          // }
        ],
        beforeImg:'/static/images/shop_star.png',   //灰星星
        afterImg:'/static/images/star_dian.png',    //黄星星
        starImg:'/static/images/star_click_half.png',    //半个星星
        only:false,   //单一图片处理
    }
  },
  onLoad(options){
    console.log(options.index)
    if(options.index=='-1'){
      this.only=false
    }else{
      this.only=true
    }
  },
  methods: {
    
  },

  created () {
    
  }
}
</script>

<style scoped lang="less">
.shop_evaluate{
   width: 100%;
   .popre_list{
      width: 100%;
      color: #999;
      font-size: 26rpx;
      margin-bottom: 40rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      border-top: 2rpx solid #ccc;
      .popre_header{
        width: 100%;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .popre_l{
          display: flex;
          align-items: center;
          image{
            width: 80rpx;
            height: 80rpx;
            margin-right: 30rpx;
          }
          .popre_info{
            display: flex;
            flex-direction: column;
            .popre_name{
              color: #333;
            }
            .popre_time{
              font-size: 24rpx;
            }
          }
        }
        .popre_r{
          width: 164rpx;
          height: 28rpx;
          .stars{
            display: flex;
            justify-content: space-between;
            align-items: center;
            image{
              width: 28rpx;
              height: 28rpx;
            }
          }
        }
      }
      .popre_title{
        margin: 20rpx 0;
      }
      .evaluate_img_box{
          width: 100%;
          height: 220rpx;
          display: flex;
          justify-content: space-between;
          .evaluate_box{
            image{
              width: 220rpx;
              height: 220rpx;
            }
          } 
      }
      .only_img{
        .only_box{
          width: 100%;
          margin-bottom: 20rpx;
          image{
            width: 100%;
            height: 690rpx;
          }
        }
      }
      .cations{
        display: flex;
        align-items: center;
        padding: 12rpx 0 26rpx 0;
        box-sizing: border-box;
        .cations_info{
          margin-right: 20rpx;
        }
      }
  }
}
</style>
